<template>
  <el-dialog
    :visible="ShowDialog"
    title="题目预览"
    @close="closeDialog"
    :close-on-click-modal="false"
  >
    <el-row>
      <el-col :span="6">【题型】:{{ questionTypeinfo() }}</el-col>
      <el-col :span="6">【编号】:{{ tableDate.id }}</el-col>
      <el-col :span="6">【难度】:{{ difficultyinfo() }}</el-col>
      <el-col :span="6">【标签】:{{ tableDate.tags }}</el-col>
    </el-row>
    <el-row>
      <el-col :span="6">【学科】:{{ tableDate.subjectID }}</el-col>
      <el-col :span="6">【目录】:{{ tableDate.catalogID }}</el-col>
      <el-col :span="6">【方向】:{{ tableDate.direction }}</el-col>
    </el-row>
    <el-row><hr /></el-row>
    <el-row
      >【题干】：
      <div style="color: blue" v-html="tableDate.question"></div>
      <div v-if="tableDate.questionType === '1'">
        <p>单选题 选项：（以下选中的选项为正确答案）</p>
        <el-row v-for="item in tableDate.options" :key="item.id">
          <el-radio @click.native.prevent v-model="radio" :label="item.isRight">{{
            item.title
          }}</el-radio>
          <img v-if="item.img !== ''" :src="item.img" width="200px" />
        </el-row>
      </div>
      <div v-if="tableDate.questionType === '2'">
        <p>多选题 选项：（以下选中的选项为正确答案）</p>
        <el-row v-for="item in tableDate.options" :key="item.id">
          <!-- 1.禁用:disabled="item.isRight === 0?true:false" -->
           <!--2.阻止默认行为@click.native.prevent -->
           <!-- :value="item.isRight===1?true:false" -->
          <el-checkbox :value="item.isRight===1?true:false"  :checked="item.isRight === 1" :label="item.title"
            ><img v-if="item.img !== ''" :src="item.img" width="200px"
          /></el-checkbox>
        </el-row>
      </div>
    </el-row>
    <el-row><hr /></el-row>
    <el-row>
      【参考答案】:<el-button
        style="margin-left: 5px"
        size="small"
        type="danger"
        @click="videoWatch"
        >视频答案预览</el-button
      ><br />
      <video
        width="50%"
        v-if="video"
        :src="tableDate.videoURL"
        autoplay
        controls
      ></video>
    </el-row>
    <el-row><hr /></el-row>
    <el-row
      >【答案解析】:<span
        style="display: inline-block"
        v-html="tableDate.answer"
      ></span>
    </el-row>
    <el-row><hr /></el-row>
    <el-row>【题目备注】:{{ tableDate.remarks }}</el-row>
    <el-row>
      <el-button style="float:right;margin-top:20px" type="primary"  @click="closeDialog">关闭</el-button>
    </el-row>
  </el-dialog>
</template>

<script>
import { questionType, difficulty } from '@/api/hmmm/constants'
export default {
  props: {
    ShowDialog: {
      type: Boolean,
      default: false
    },
    tableDate: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      // 是否选中
      radio: 1,
      video: false
    }
  },
  methods: {
    // 关闭的回调
    closeDialog () {
      this.$emit('update:ShowDialog', false)
      this.video = false
    },
    // 题型处理
    questionTypeinfo () {
      const res = questionType.find(
        (item) => item.value === this.tableDate.questionType
      )
      return res ? res.label : '未知'
    },
    // 难度处理
    difficultyinfo () {
      const res = difficulty.find(
        (item) => item.value === this.tableDate.difficulty
      )
      return res ? res.label : '未知'
    },
    // 视频处理
    videoWatch () {
      if (this.tableDate.videoURL === null) {
        this.$message.warning('该题目无视频答案预览')
      } else {
        this.video = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-row {
  margin-top: 10px;
}
img {
  vertical-align: middle;
}
</style>
